<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花坊OA系统</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            padding-top: 16px;
        }
    </style>
</head>

<body>

    <div class="container">


        <div class="panel panel-default">
            <div class="panel-body">
                <!-- 珊格系统 
                栅格系统使用css的媒体查询(@media (max-width: 1290px))来实现不同分比率的不同展示
                bootstrap3及以下，使用的是display: inline-block; 12栅格(一行12格)
                bs3-row-col  3列 就4线
                bs3-btn-primary  是主要键的意思
                -->
                <div class="row">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <input type="text" name="" id="input" class="form-control" value="" required="required"
                            pattern="" title="">

                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <button type="button" class="btn btn-primary">查询</button>

                        <button onclick="ediEvt()" type="button" class="btn btn-success">新增</button>
                    </div>
                </div>
            </div>
        </div>



        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">用户列表信息</h3>
            </div>
            <div class="panel-body">
                <!-- 
                    bs3-pannel 是列表头 
                    bs3-table-striped 斑马线 鼠标移上去 变色 -->
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>编码</th>
                            <th>名字</th>
                            <th>性别</th>
                            <th>生日</th>
                            <th>电话</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="list">
                       
                    </tbody>
                </table>


            </div>
        </div>


    </div>


    <script>

        function ediEvt(){
            location.href='../user/edit.html'
        }
        function getList() {

            // from(iterable: ArrayLike, mapfn: (v: any, k: number)) => mapfn map方法
            var arr = Array.from(Array(11), (_, i) => {
                return {
                    id: `ZHANGSAN-0${i}`,
                    password: `00${i}`,
                    name: `张三-${i}`,
                    sex: Math.random() > .5 ? '女' : '男',
                    birthday: '2000-01-01',
                    address: '',
                    code: '',
                    phone: '13691715060',
                    email: 'deming_su@163.com',
                    level: 'AAA'
                }
            })
            // JSON.stringify(arr) 删除键用 bs3-btn-danger  编辑用 bs3-btn-warning
       var str=''
         arr.forEach(function(item){
             str+= `
             <tr>
                 
                 <td>${item.id}</td>
                 <td>${item.name}</td>
                 <td>${item.sex}</td>
                 <td>${item.birthday}</td>
                 <td>${item.phone}</td>
                 <td>
                    <button type="button" class="btn btn-xs btn-danger">删除</button>
                    <button type="button" class="btn btn-xs btn-warning">编辑</button>
                </td>
                 
             </tr>
             
             `
         })
         list.innerHTML=str

        }
        getList()
    </script>




</body>

</html>